<template>
  <el-container class="home-container">
    <!-- 头部区域 -->
    <el-header>
      <div class="home-item">
        <img src="../../assets/images/heima.png" alt="">
        <span> 后台管理系统 </span>
      </div>
      <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <!-- 页面主体区域 -->
    <el-container>
    <!-- 侧边栏 -->
    <home-item-aside v-bind:CCMenuList="CMenuList"/>
    <!-- 右侧边栏主体 -->
    <main-item/>
    </el-container>
  </el-container>
</template>

<script>
  import HomeItemAside from "./HomeItemAside";
  import MainItem from "../Main/MainItem";
  export default {
    name: "HomeItem",
    components: {
      HomeItemAside,
      MainItem
    },
    props: {
      // 接收来自Home传过来的数据
      CMenuList: {
        type: Array,
        default() {
          return[]
        }
      }
    },
    methods: {
      // 退出登录
      logout() {
        // 摧毁本地token值
        window.sessionStorage.clear()
        this.$router.push('/login')
      }
    }
  }
</script>

<style scoped>
  .home-container {
    height: 100%;
  }
  .el-header {
    background-color: #00192E;
    display: flex;
    /* 左右靠边布局 */
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 23px;
  }
  .home-item {
    display: flex;
    align-items: center;
  }
  .home-item span {
    margin-left: 15px;
  }
</style>